<template>
  
  <div class="loud-conspiracy">
    <h2>大声密谋加密工具</h2>

    <!-- 密钥设置区域 -->
    <div class="key-section">
      <el-switch v-model="useKey" active-text="使用密钥" inactive-text="不使用密钥" @change="handleKeyToggle" />

      <!-- 单独一行的密钥输入框 -->
      <div v-if="useKey" class="key-input-row">
        <el-input v-model="encryptionKey" :type="showKey ? 'text' : 'password'" placeholder="请输入加密/解密密钥"
          class="key-input" />
        <el-button @click="toggleKeyVisibility" :icon="showKey ? 'el-icon-view' : 'el-icon-view'"
          class="key-toggle-btn">
          {{ showKey ? '隐藏' : '显示' }}
        </el-button>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-section">
      <el-input v-model="inputText" type="textarea" :rows="6" placeholder="请输入明文或密文（支持中英文）" />
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleEncrypt" :disabled="!inputText" style="margin-right: 10px;">
        加密
      </el-button>
      <el-button type="success" @click="handleDecrypt" :disabled="!inputText" style="margin-right: 10px;">
        解密
      </el-button>
      <!-- 新增清空按钮 -->
      <el-button type="warning" @click="clearInput" :disabled="!inputText && !outputText">
        清空输入
      </el-button>
    </div>

    <div class="output-section">
      <h3>结果：</h3>
      <el-input v-model="outputText" type="textarea" :rows="6" readonly placeholder="加密或解密结果将显示在这里" />
      <el-button @click="copyText(outputText)" :disabled="!outputText" style="margin-top: 10px; margin-right: 10px;">
        复制结果
      </el-button>
      <!-- 新增清空结果按钮 -->
      <el-button type="warning" @click="clearOutput" :disabled="!outputText" style="margin-top: 10px;">
        清空结果
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoudConspiracy',
  // 在data()中替换映射表部分
  data() {
    return {
      inputText: '',
      outputText: '',
      useKey: false,
      encryptionKey: '',
      showKey: false,
      // 修复后的Base64字符到中文字符映射表（确保唯一性）
      base64ToChineseMap: {
        'A': '玛', 'B': '卡', 'C': '巴', 'D': '玛卡', 'E': '玛巴', 'F': '卡玛',
        'G': '卡巴', 'H': '巴马', 'I': '巴卡', 'J': '玛玛', 'K': '卡卡', 'L': '巴巴',
        'M': '玛卡巴', 'N': '卡玛巴', 'O': '巴马卡', 'P': '巴卡玛', 'Q': '玛巴马',
        'R': '卡巴玛', 'S': '玛玛卡', 'T': '玛玛巴', 'U': '卡卡玛', 'V': '卡卡巴',
        'W': '巴巴玛', 'X': '巴巴卡', 'Y': '玛卡玛', 'Z': '玛巴卡', 'a': '卡玛卡',
        'b': '卡巴卡', 'c': '巴马巴', 'd': '巴卡巴', 'e': '玛玛玛', 'f': '卡卡卡',
        'g': '巴巴巴', 'h': '玛卡玛卡', 'i': '玛巴玛巴', 'j': '卡玛卡玛', 'k': '卡巴卡巴',
        'l': '巴马巴马', 'm': '巴卡巴卡', 'n': '玛玛卡卡', 'o': '玛玛巴巴', 'p': '卡卡玛玛',
        'q': '卡卡巴巴', 'r': '巴巴玛玛', 's': '巴巴卡卡', 't': '玛卡巴巴', 'u': '卡玛巴巴',
        'v': '巴马卡卡', 'w': '巴卡玛玛', 'x': '玛玛玛卡', 'y': '卡卡卡玛', 'z': '巴巴巴马',
        '0': '玛卡巴玛', '1': '卡玛巴卡', '2': '巴马卡巴', '3': '巴卡玛巴', '4': '玛巴马卡',
        '5': '卡巴玛巴', '6': '玛玛卡巴', '7': '卡卡玛巴', '8': '玛卡卡巴', '9': '巴玛卡巴',
        '+': '巴玛卡', '/': '卡巴玛', '=': '玛巴卡玛'
      },
  
      // 修复后的中文字符到Base64字符逆映射（确保唯一性）
      chineseToBase64Map: {
        '玛': 'A', '卡': 'B', '巴': 'C', '玛卡': 'D', '玛巴': 'E', '卡玛': 'F',
        '卡巴': 'G', '巴马': 'H', '巴卡': 'I', '玛玛': 'J', '卡卡': 'K', '巴巴': 'L',
        '玛卡巴': 'M', '卡玛巴': 'N', '巴马卡': 'O', '巴卡玛': 'P', '玛巴马': 'Q',
        '卡巴玛': 'R', '玛玛卡': 'S', '玛玛巴': 'T', '卡卡玛': 'U', '卡卡巴': 'V',
        '巴巴玛': 'W', '巴巴卡': 'X', '玛卡玛': 'Y', '玛巴卡': 'Z', '卡玛卡': 'a',
        '卡巴卡': 'b', '巴马巴': 'c', '巴卡巴': 'd', '玛玛玛': 'e', '卡卡卡': 'f',
        '巴巴巴': 'g', '玛卡玛卡': 'h', '玛巴玛巴': 'i', '卡玛卡玛': 'j', '卡巴卡巴': 'k',
        '巴马巴马': 'l', '巴卡巴卡': 'm', '玛玛卡卡': 'n', '玛玛巴巴': 'o', '卡卡玛玛': 'p',
        '卡卡巴巴': 'q', '巴巴玛玛': 'r', '巴巴卡卡': 's', '玛卡巴巴': 't', '卡玛巴巴': 'u',
        '巴马卡卡': 'v', '巴卡玛玛': 'w', '玛玛玛卡': 'x', '卡卡卡玛': 'y', '巴巴巴马': 'z', // 唯一对应
        '玛卡巴玛': '0', '卡玛巴卡': '1', '巴马卡巴': '2', '巴卡玛巴': '3', '玛巴马卡': '4',
        '卡巴玛巴': '5', '玛玛卡巴': '6', '卡卡玛巴': '7', '玛卡卡巴': '8', // 唯一对应
        '巴玛卡巴': '9', // 唯一对应
        '巴玛卡': '+', '卡巴玛': '/', '玛巴卡玛': '='
      }
    }
  },
  computed: {
    // Base64字符到中文字符的映射
    // base64ToChineseMap() {
    //   return {
    //     'A': '玛', 'B': '卡', 'C': '巴', 'D': '玛卡', 'E': '玛巴', 'F': '卡玛',
    //     'G': '卡巴', 'H': '巴玛', 'I': '巴卡', 'J': '玛玛', 'K': '卡卡', 'L': '巴巴',
    //     'M': '玛卡巴', 'N': '卡玛巴', 'O': '巴玛卡', 'P': '玛巴卡', 'Q': '卡巴玛', 'R': '巴卡玛',
    //     'S': '玛玛卡', 'T': '玛玛巴', 'U': '卡卡玛', 'V': '卡卡巴', 'W': '巴巴玛', 'X': '巴巴卡',
    //     'Y': '玛卡玛', 'Z': '玛巴玛', 'a': '卡玛卡', 'b': '卡巴卡', 'c': '巴玛巴', 'd': '巴卡巴',
    //     'e': '玛卡巴玛', 'f': '卡玛巴卡', 'g': '巴玛卡巴', 'h': '玛巴卡玛', 'i': '卡巴玛卡', 'j': '巴卡玛巴',
    //     'k': '玛玛卡巴', 'l': '玛巴玛卡', 'm': '卡玛卡巴', 'n': '卡巴卡玛', 'o': '巴玛巴卡', 'p': '巴卡巴玛',
    //     'q': '玛卡玛巴', 'r': '卡玛巴玛', 's': '巴玛卡玛', 't': '玛巴卡巴', 'u': '卡巴玛巴', 'v': '巴卡玛卡',
    //     'w': '玛玛巴卡', 'x': '卡卡玛巴', 'y': '巴巴玛卡', 'z': '玛卡巴卡', '0': '卡玛巴玛', '1': '巴玛卡巴',
    //     '2': '玛巴卡玛', '3': '卡巴玛卡', '4': '巴卡玛巴', '5': '玛玛卡巴', '6': '玛巴玛卡', '7': '卡玛卡巴',
    //     '8': '卡巴卡玛', '9': '巴玛巴卡', '+': '巴卡巴玛', '/': '玛卡玛巴', '=': '卡玛巴玛'
    //   }
    // },
    // // 中文字符到Base64字符的反向映射
    // chineseToBase64Map() {
    //   const reverseMap = {};
    //   for (const [key, value] of Object.entries(this.base64ToChineseMap)) {
    //     reverseMap[value] = key;
    //   }
    //   return reverseMap;
    // }
  },
  methods: {

    // 新增：清空输入框内容（保留密钥）
    clearInput() {
      this.inputText = '';
      this.$message.success('输入框已清空');
    },

    // 新增：清空输出结果
    clearOutput() {
      this.outputText = '';
      this.$message.success('结果已清空');
    },

    // 修改：密钥切换处理
    handleKeyToggle() {
      this.encryptionKey = '';
      this.outputText = '';
    },

    // 加密处理
    handleEncrypt() {
      if (!this.inputText) {
        this.outputText = '';
        return;
      }

      try {
        // 将文本转换为Base64
        const base64Text = btoa(unescape(encodeURIComponent(this.inputText)));

        // 将Base64字符映射为中文字符组合
        let encrypted = '';
        for (let i = 0; i < base64Text.length; i++) {
          const char = base64Text[i];
          if (this.base64ToChineseMap[char]) {
            encrypted += this.base64ToChineseMap[char];
            if (i < base64Text.length - 1) {
              encrypted += '咔';
            }
          }
        }

        this.outputText = encrypted;
      } catch (error) {
        this.outputText = '加密失败：' + error.message;
      }
    },

    // 修改：解密处理
    // 解密处理
    handleDecrypt() {
      if (!this.inputText) {
        this.outputText = '';
        return;
      }

      try {
        // 使用'咔'分割密文
        const chineseBlocks = this.inputText.split('咔');
        console.log(chineseBlocks);


        // 将中文字符组合映射回Base64字符
        let base64Text = '';
        for (const block of chineseBlocks) {
          if (this.chineseToBase64Map[block]) {
            base64Text += this.chineseToBase64Map[block];
          }
        }

        // 将Base64解码为原始文本
        const decodedText = decodeURIComponent(escape(atob(base64Text)));
        this.outputText = decodedText;
      } catch (error) {
        this.outputText = '解密失败：' + error.message;
      }
    },

    // 复制文本功能
    copyText(text) {
      navigator.clipboard.writeText(text).then(() => {
        this.$message.success('复制成功！');
      }).catch(() => {
        this.$message.error('复制失败，请手动复制');
      });
    },

    // 新增：切换密钥显示状态
    toggleKeyVisibility() {
      this.showKey = !this.showKey;
    },
  }
}
</script>

<style scoped>
.loud-conspiracy {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.key-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eaeaea;
}

.input-section,
.output-section {
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
  text-align: center;
}

h2,
h3 {
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.el-button {
  margin-top: 10px;
}

/* 按钮样式优化 */
.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--success {
  background-color: #67C23A;
  border-color: #67C23A;
}

.el-button--warning {
  background-color: #E6A23C;
  border-color: #E6A23C;
  color: #fff;
}

/* 响应式布局 */
@media (max-width: 600px) {
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .action-buttons .el-button {
    margin-right: 0;
    width: 100%;
  }
}

.key-input-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
  gap: 10px;
  /* 添加基线对齐 */
  align-items: baseline;
}

.key-input {
  flex: 1;
  max-width: 300px;
  /* 调整内边距确保文本垂直居中 */
  padding: 8px 15px;
  box-sizing: border-box;
}

.key-toggle-btn {
  white-space: nowrap;
  /* 调整按钮内边距 */
  padding: 12px 15px;
  /* 确保按钮高度 */
  height: auto;
  min-height: 40px;
}
</style>